<template functional>
  <div class="progress-bar">
    <span class="inner">
      <span class="bar" :style="{'width':props.percent+'%'}"></span>
    </span>
    <b class="text" v-if="props.showText">{{props.percent}}%</b>
  </div>
</template>

<style lang="less">
@import "../utils/vars";
@h : 12px;
.progress-bar {
  display: flex;
  width: 66%;
  font-size: @h;
  border: (@h/4) solid @blue;
  background: white;
  border-radius: @h*1.25;
  padding: @h/6;
  box-shadow: 1px 1px 1px #ffffff;
  .inner {
    flex: 1;
    border-radius: @h*.75;
    overflow: hidden;
    background-color: @blue;
    box-shadow: inset -@h/5 @h/2 @h/3 darken(@blue, 12%);
    .bar {
      display: inline-block;
      height: 100%;
      transition: width 0.3s;
      background: linear-gradient(to bottom, lighten(@yellow, 30%), @yellow);
    }
  }
  .text {
    color: @blue;
    margin: 0 @h/4;
    text-align: center;
  }
}
</style>
